<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>websocket 1：发送消息给自己——服务器直接返回</title>
	</head>
	<body>
		<input id="text" type="text" />
		<button onclick="send()">Send</button>
		<button onclick="closeWs1()">Close</button>
		<div id="reply"></div>
	</body>
	<script type="text/javascript">
		var websocket = null;
		
		// 判断当前浏览器是否支持WebSocket, 主要此处要更换为自己的地址
		if ('WebSocket' in window) {
			websocket = new WebSocket("ws://localhost:10000/ws1");
		} else {
			alert("Not support websocket");
		}
		
		// 连接发生错误的回调方法
		websocket.onerror = function() {
			sendMsgInnerHtml("Error!");
		}
		
		// 连接成功建立的回调方法
		websocket.onopen = function() {
			sendMsgInnerHtml("Open!");
		}
		
		// 接收到消息的回调方法
		websocket.onmessage = function(event) {
			sendMsgInnerHtml(event.data);
		}
		
		// 连接关闭的回调方法
		websocket.onclose = function() {
			sendMsgInnerHtml("Closed!");
		}
		
		// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，
		// 防止连接还没断开就关闭窗口，server端会抛异常。
		window.onbeforeunload = function() {
			websocket.close();
		}
		
		// 将消息显示在网页上
		function sendMsgInnerHtml(innerHtml) {
			document.getElementById("reply").innerHTML += innerHtml + "<br/>";
		}
		
		// 发送消息
		function send() {
			var msg = document.getElementById("text").value;
			websocket.send(msg);
		}
		
		// 关闭连接
		function closeWs1() {
			websocket.close();
		}
	</script>
</html>
